<%@ taglib uri="/WEB-INF/tld/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/tld/struts-logic.tld" prefix="logic"%>
<%@ taglib uri="/WEB-INF/tld/struts-bean.tld" prefix="bean"%>

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Update Subject Preparation Detail</title>
<link href="/WebFinalProject/css/FinalProjectCSS.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-combined.min.css">
<script type="text/javascript">
	function updateSubject(task) {
		 if(validateNumOfQuestion() == true){
			 var cek = confirm('Are you sure want to Update Exam Preparation Detail - '+ document.forms[0].elements['modelExamPrepDetail.examPrepDetailId'].value +' ?');
			if(cek==true){
				 document.forms[0].task.value = task;
				 document.forms[0].submit();
			}
		 }
	}
	
	function flyToPage(task) {
		 document.forms[0].task.value = task;
		 document.forms[0].submit();
	}
	
	function showNmberOfQuestion() {
		var classId = document.forms[0].elements['modelExamPrepDetail.classId'].value;
		var task = 'getNumOfQuest';
		$.ajax({
            type: "POST",
            url: "/WebFinalProject/Eclass.do",
            data: "modelExamPrepDetail.classId=" + classId + "&task=" + task,
            success: function(response){
                $('#numOfQuest').html(response);
            },
            error: function(e){
                alert('Error: ' + e);
            }
        });
		validateNumOfQuestion();
	}
	
	function validateNumOfQuestion(){
		var limitMaxQuest = document.getElementById('numberOfQuest').value;
		var numOfQuest = document.forms[0].elements['modelExamPrepDetail.noOfQuestion'].value;
		if(numOfQuest > limitMaxQuest){
			alert('Number Of Question yang Anda masukkan melebihi limit!');
			document.forms[0].elements['modelExamPrepDetail.noOfQuestion'].value = limitMaxQuest;
			return false;
		}
		return true;
	}
	
	
</script>
</head>
<body onload="javascript:showNmberOfQuestion();">
	<center>
		<table width="1000px" class="bodyTable boxShadow">
		
			<!-- Header -->
			<tr>
				<td colspan="2"><%@include file="/include/Header.jsp"%></td>
			</tr>
		
			<!-- Content -->
			<tr>
				<td rowspan="2" width="200px" class="navigationBox"><%@include file="/include/Navigation.jsp"%></td>
				<td align="left" class="headerBox blueBackground">BreadCrumb</td>
			</tr>
			<tr>
				<td align="center"  class="contentStyle"><br>
					<html:form action="/Eclass" method="post">
						<html:hidden property="task" name="eclassForm" />
						<br />
				
						<table align="center" border="1" class="boxShadow">
							<tr class="headerBox greyBackground">
								<td colspan="3" align="center" style="padding:5px 7px;">Update Subject Preparation Detail</td>
							</tr>
							<tr>
								<td style="vertical-align: middle; padding: 5px 7px;">Exam Preparation Detail ID</td>
								<td style="vertical-align: middle; padding: 5px 7px;">
									<html:hidden name="eclassForm" property="modelExamPrepDetail.examPrepDetailId" />
									<bean:write name="eclassForm" property="modelExamPrepDetail.examPrepDetailId" />
								</td>
							</tr>
							<tr>
								<td style="vertical-align: middle; padding: 5px 7px;">Exam Preparation ID</td>
								<td style="vertical-align: middle; padding: 5px 7px;">
									<html:hidden name="eclassForm" property="modelExamPrepDetail.examPrepId" />
									<bean:write name="eclassForm" property="modelExamPrepDetail.examPrepId" />
								</td>
							</tr>
							<tr>
								<td style="vertical-align: middle; padding: 5px 7px;">Class ID</td>
								<td style="vertical-align: middle; padding: 5px 7px;">
									<html:select property="modelExamPrepDetail.classId" onchange="javascript:showNmberOfQuestion();">
										<html:option value="">Select</html:option>
										<logic:notEmpty name="eclassForm" property="listClass">
											<html:optionsCollection name="eclassForm" property="listClass" label="className" value="classId"/>
										</logic:notEmpty>
									</html:select>
								</td>
							</tr>
							
							<tr>
								<td style="vertical-align: middle; padding: 5px 7px;">Number Of Question</td>
								<td style="vertical-align: middle; padding: 5px 7px;">
									<html:text property="modelExamPrepDetail.noOfQuestion" name="eclassForm" onchange="javascript:validateNumOfQuestion();"></html:text>
									 / <span id = "numOfQuest"></span>
								</td>
							</tr>
							
							<tr>
								<td colspan="3" align="center" style="padding: 5px 7px;">
									<input type="button" class="buttonStyle" value="Save" onclick="javascript:updateSubject('updateSubjectDetail');"/>
									&nbsp;
									<input type="button" class="buttonStyle" value="Cancel" onclick="javascript:flyToPage('backToListSubjectDetail');">
								</td>
							</tr>
				
						</table>
					</html:form><br>
					</td>
			</tr>
			
			<!-- Footer -->
			<tr>
				<td align="center" colspan="2" class="headerBox blueBackground">&copy; OME. 2013. All Rights Reserved.</td>
			</tr>
		</table>
	</center>	
</body>
</html>